<template>
  <el-popover
    class="YOverflowTooltip"
    :content="content"
    :disabled="disabled"
    trigger="hover">
    <slot ref="input" slot="reference"></slot>
  </el-popover>
</template>

<script>
export default {
  name: "YOverflowTooltip",
  data(){
    return {
      disabled: true,
      content: ''
    }
  },
  updated() {
    setTimeout(() => {
      let _slot = this.$slots.default[0];
      if(_slot){
        let _el = _slot.elm;
        let _input = _el.querySelector('input[type=text]');
        this.content = _input.value;
        this.disabled = _input.offsetWidth >= _input.scrollWidth;
      }
    }, 0)
  }
}
</script>

<style scoped>

</style>